<template>
    <div>
        <!--   图标/小圆点 -->
        <span @click="drawer = true" style="height: 50px;text-align: center">
            <el-badge :value="allNum.unreadNum" :max="99">
                  <el-Bell style="width: 1.2em; height: 1.2em; margin-right: 8px;"/>
            </el-badge>
       </span>
        <span>
        <el-drawer title="通知列表" size="320px" direction="rtl" :with-header="true" v-model="drawer">
             <template #header="{ close, titleId, titleClass }" style="height: 44px;margin-bottom: 0px;">
                     <h4 :id="titleId" :class="titleClass">通知列表</h4>
             </template>
            <el-tabs style="width: 100%" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all">
                  <div v-for="item in obj">
                      <el-badge :hidden="item.isRead === 1" is-dot class="item">
                          <span class="msgTitle" @click="clickMsg(item)"> {{ JSON.parse(item.content).title }} </span>
                      </el-badge>
                      <span class="msgTime">{{ item.createTime }} </span>
                      <div class="msgContent"> {{ JSON.parse(item.content).message }} </div>
                      <el-divider></el-divider>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="已读" name="1">
                  <div v-for="item in obj">
                      <el-badge :hidden="item.isRead === 1" is-dot class="item">
                         <span class="msgTitle" @click="clickMsg(item)">{{ JSON.parse(item.content).title }} </span>
                      </el-badge>
                      <span class="msgTime"> {{ item.createTime }} </span>
                      <div class="msgContent">   {{ JSON.parse(item.content).message }}  </div>
                      <el-divider></el-divider>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="未读" name="0">
                  <div v-for="item in obj">
                      <el-badge :hidden="item.isRead == 1" is-dot class="item">
                          <span class="msgTitle" @click="clickMsg(item)"> {{ JSON.parse(item.content).title }} </span>
                      </el-badge>
                      <span class="msgTime"> {{ item.createTime }} </span>
                    <div class="msgContent"> {{ JSON.parse(item.content).message }} </div>
                    <el-divider></el-divider>
                  </div>
                </el-tab-pane>
              </el-tabs>
              <span style="font-size: 12px; margin-left: 5%">
                   共 {{ page.total }} 条 | 共 {{ page.pages }} 页
              </span>
              <span style="margin-left: 2%">
              <el-button size="small" @click="prevHandle()">上一页</el-button>
          </span>
          <span style="margin-left: 2%"> {{ page.current }} </span>
              <span style="margin-left: 2%">
              <el-button size="small" @click="nextHandle()">下一页</el-button>
          </span>
          </el-drawer>
        </span>
    </div>
</template>

<script>
import router from '@/router/'

export default {
    name: 'top-msg',
    data() {
        return {
            uri: {
                infoList: '/api/admin/sys/msg/findPage',
                findAllNum: '/api/admin/sys/msg/findAllNum', //查询已读/未读/使用数量
                read: '/api/admin/sys/msg/{id}/read', //修改为已读
            },
            page: {
                current: 1, //当前页
                size: 5, //每页条数
                total: 0, //总条数
                pages: 0, //总页数
            },
            activeName: 'all',
            drawer: false,
            obj: [],
            allNum: {},
        }
    },
    created() {
        // 数量查询
        this.crud.get(this.uri.findAllNum).then((res) => {
            this.allNum = res.data.data
        })
    },
    // 监听 drawer 变化, 打开消息窗口
    watch: {
        drawer: function (newDrawer, oldDrawer) {
            if (newDrawer) {
                this.handleClick()
            }
        },
    },
    methods: {
        /**
         * 查询
         */
        handleClick(tab, event) {
            if (tab != null && tab.props != null) {
                // 切换 tab
                this.activeName = tab.props.name;
                this.page.current = 1;
            }
            this.crud.get(this.uri.infoList, {
                current: this.page.current,
                size: this.page.size,
                isRead: this.activeName !== 'all' ? this.activeName : "",
            }).then((res) => {
                this.obj = res.data.data.records
                this.page.current = res.data.data.current
                this.page.size = res.data.data.size
                this.page.total = res.data.data.total
                this.page.pages = res.data.data.pages
            })
        },
        // 上一页
        prevHandle() {
            if (this.page.current - 1 > 0) {
                this.page.current = this.page.current - 1
            }
            this.handleClick()
        },
        // 下一页
        nextHandle() {
            if (this.page.current + 1 <= this.page.pages) {
                this.page.current = this.page.current + 1
            }
            this.handleClick()
        },
        // 点击消息
        clickMsg(item) {
            if (item.isRead === 0) {
                // 修改为已读
                this.crud.put(this.uri.read.replace('{id}', item.id), {isRead: 1}).then((res) => {
                    // 刷新当前列表
                    this.handleClick()
                    this.findAllNum()
                })
            }
            // 跳转路由
            let routePath = JSON.parse(item.content).routePath
            if (routePath != null && routePath !== '') {
                console.debug('点击消息跳转路由:' + routePath)
                // router.push({path: routePath + '&time=' + new Date().getTime()})
                // 获取url上的参数为查询条件
                let params = this.getQueryParams(routePath)
                params.time = new Date().getTime()
                router.push({
                    path: routePath + "&time=" + new Date().getTime(),
                    query: params
                });
            }
        },
        /**
         * 查询消息数量
         */
        findAllNum() {
            // 更新数量
            this.crud.get(this.uri.findAllNum).then((res) => {
                this.allNum = res.data.data
            })
        },
        getQueryParams(url) {
            var queryStr = url.slice(url.indexOf('?') + 1);
            return queryStr.split('&').reduce(function (params, item) {
                var parts = item.split('=');
                params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
                return params;
            }, {});
        }
    },
}
</script>

<style lang="scss">

.el-drawer {
    margin-top: 50px;
}

/* 设置弹层标题和内容的间隔 */
.el-drawer__header {
    margin: 0 !important;
}

/* 内容 */
.msgContent {
    margin-right: 5%;
    margin-top: -8px;
    font-size: 13px;
    white-space: normal;
    //word-break: break-all;
    //word-wrap: break-word;
    line-height: 1.5;
}

/* 标题 */
.msgTitle {
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    // font-style: italic;
}

/* 时间 */
.msgTime {
    font-size: 14px;
    height: 20px;
    color: #d0cbcb;
    float: right;
    margin-right: 5%;
}
</style>
